<template>
	<div>
		<h2 id="title" ref="title" v-text="msg"></h2>
		<button @click="add">打印标签</button>
		<Student ref="boy"></Student>
		<br />
		<Dog ref="boy" sex="雌狗" :age="2"></Dog>
		<br />
		<hr />
		<Cat></Cat>
	</div>
</template>

<script>
	import Student from './components/Student.vue';
	import Dog from './components/Dog.vue'
	import Cat from './components/Cat.vue';
	
	export default {
		name:'App',
		data() {
			return {
				name: 'App来了',
				msg:'来了,老弟啊'
			}
		},
		components:{
			Student,
			Dog,
			Cat
		},
		methods:{
			// 需求:打印上面的标签
			add() {
				//1. 之前实现,是通过h5的方法,通过id获取dom直接打印
				// console.log(document.getElementById('title'))
				
				// 2.vue里是通过ref属性获取元素
				console.log(this.$refs.title)
				
				// 如果给自定义组件添加ref,可以拿到对应组件的vm,可以拿到vm里面的数据和方法等信息
				console.log(this.$refs.boy.name)
			}
		}
	}
</script>

<style>
</style>